<template>
    <div class="flex-main">
        <div class="flex-body m-share">
            <img src="@/assets/images/share-img.png" alt="" class="m-share-bg">
            <!-- <img src="@/assets/images/mytEWM.jpg" alt="" class="mytEWM"> -->
            <canvas id="qrccode-canvas" class="mytEWM"></canvas>
        </div>
        <footer-nav class="flex-bottom"></footer-nav>
    </div>

</template>
<script>
let QRCode = require('qrcode');
export default {
    name:'',
    data() {
        return {

        }
    },
    methods:{},
    mounted () {
        let that = this;
        this.$nextTick(function () {
          // DOM操作
          let canvas = document.getElementById('qrccode-canvas');
          let _HOST = window.location.host;
          let bannerUrl = "http://" + _HOST + "/dist/index.html?superiorid=" + that.$utils.uid ;     //指定到首页
          QRCode.toCanvas(canvas, bannerUrl, (error) => {
              if (error) {
              console.log(error)
              } else {
              console.log('success')
              }
          })
        })
    }
}
</script>
<style lang="less" scoped>
.m-share{
    position: relative;
    .m-share-bg{
        width: 100%;
        height: 100%;
    }
    .mytEWM{
        position: absolute;
        top: 57.4%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        width: 27%;
    }
}
</style>
